.main-ul {
  list-style: none;
  padding: 0;
  position: relative;
  margin-top: 2px;
}

ul li {
  a {
    position: relative;
  }
  display: none;
  position: relative;
  > a:after {
    content: "\e99a";
    font-family: 'material';
    display: inline-block;
    top: 16px;
    right: 15px;
    position: absolute;
    font-size: 23px;
    left: auto;
    transition: transform .3s;
  }
  &.opened > a:after {
    transform: rotate(90deg);
  }
  > a:only-child:after {
    content: "";
    border: 0;
  }
}

.main-ul {
  > li {
    display: block;
    &.opened {
      background: #f7f7f7;
      border-left: 3px solid #4c84ff;
      
      .child-ul {
        background: #f9f9f9;
      }
    }
    > a:hover{
          background: #f7f7f7 !important;
      }
  }
  li {
    i[class^="icon-"], i[class^="fa-"] {
      font-size: 22px;
      padding-right: 5px;
      text-align: center;
      color: #888;
    }
    i[class^="fa-"] {
      font-size: 20px;
      padding: 0 9px;
    }
    a {
      display: block;
      font-weight: 400;
      padding: 20px 20px;
      color: #333;
      text-decoration: none;
    }
    &.opened > a{
      color: #4c84ff !important;
    }
    &.opened > ngx-sidebar > .child-ul > li {
      display: block !important;
    }
  }
  > li > a:hover {
    background: #fff;
  }
}

.child-ul {
  padding-left: 10px;
  display: none;
}

.main-ul li.opened > ngx-sidebar > .child-ul {
  display: block !important;
}

.child-ul > li {
  position: relative;
  &:hover > a {
      color: #4c84ff;
  }
}

::ng-deep body[dir="rtl"] {
  .bd-sidebar{
    ul li {
      a {
        text-align: right;
      }
      > a:after {
        content: "\e999" !important;
        right: auto !important;
        left: 15px !important;
      }
      &.opened > a:after {
        transform: rotate(-90deg) !important;
      }
    }
    .main-ul {
      > li {
        &.opened {
          border-right: 3px solid #4c84ff;
          border-left: 0 !important;
        }
      }
      li {
        i[class^="icon-"] {
          padding-right: 0px !important;
          padding-left: 5px;
        }
      }
    }
  }
}
.move-back-btn {
  padding: 10px 5px;
  display: block;
  cursor: pointer;
  text-align: right;
}